<template>
  <div style="background-color: white;border-radius: 15px;margin-top: -10px">


    <el-row>
      <el-col :span="12" class="container">
        <div id="chart" class="chart"></div>
      </el-col>
      <el-col :span="12" class="container">
        <div id="chart2" class="chart" ></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" class="container">
        <div id="chart3" class="chart"></div>
      </el-col>
      <el-col :span="12" class="container">
        <div id="chart4" class="chart"></div>
      </el-col>
    </el-row>



  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'home',
  mounted() {
    this.getManOrWomanNum()
    this.getFansNumIn7Days()
    this.getThumbsNumIn7Days()
    this.getCollectionsNumIn7Days()
  },
  data(){
    return{
      womanNum:0,
      manNum:0,
      fanData:[],
      thumbData:[],
      collectionData:[]
    }
  },
  methods: {
    getManOrWomanNum(){
      this.axios.post('http://115.159.84.44:24576/wemedia/backend/v1/wemedia/getManAndWomanNum',{

      },{
        headers:{
          'token': localStorage.getItem('token')
        },
      }).then((res)=>{
        this.womanNum = res.data.data["female"]
        this.manNum = res.data.data["male"]
        this.initChart()
        console.log("男女数量 "+JSON.stringify(res.data))
      });
    },
    getFansNumIn7Days(){
      this.axios.post('http://115.159.84.44:24576/wemedia/backend/v1/wemedia/getFansNumIn7Days',{

      },{
        headers:{
          'token': localStorage.getItem('token')
        },
      }).then((res)=>{
        this.fanData = res.data.data
        console.log("fanData "+JSON.stringify(this.fanData))
        this.initChart()
      });
    },
    getThumbsNumIn7Days(){
      this.axios.post('http://115.159.84.44:24576/wemedia/backend/v1/wemedia/getThumbsNumIn7Days',{

      },{
        headers:{
          'token': localStorage.getItem('token')
        },
      }).then((res)=>{
        this.thumbData = res.data.data
        console.log("thumbData "+JSON.stringify(this.thumbData))
        this.initChart()
      });
    },
    getCollectionsNumIn7Days(){
      this.axios.post('http://115.159.84.44:24576/wemedia/backend/v1/wemedia/getCollectionsNumIn7Days',{

      },{
        headers:{
          'token': localStorage.getItem('token')
        },
      }).then((res)=>{
        this.collectionData = res.data.data
        // console.log("thumbData "+JSON.stringify(this.thumbData))
        this.initChart()
      });
    },
    initChart() {
      const chart = echarts.init(document.getElementById('chart'))
      const chart2 = echarts.init(document.getElementById('chart2'))
      const chart3 = echarts.init(document.getElementById('chart3'))
      const chart4 = echarts.init(document.getElementById('chart4'))

      var data = this.fanData
      // data.reverse()

      // 提取日期和数值
      var dates = data.map(function(item) {
        return item.date;
      });
      var values = data.map(function(item) {
        return item.value;
      });

      var data3 = this.thumbData
      // data3.reverse()

      // 提取日期和数值
      var dates3 = data3.map(function(item) {
        return item.date;
      });
      var values3 = data3.map(function(item) {
        return item.value;
      });

      var data4 = this.collectionData
      // data3.reverse()

      // 提取日期和数值
      var dates4 = data4.map(function(item) {
        return item.date;
      });
      var values4 = data4.map(function(item) {
        return item.value;
      });

      // 折线图配置项
      var option = {
        title: {
          text: '近7日粉丝数据变化折线图',
          x: 'center'
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b} <br/> 数值：{c}'
        },
        xAxis: {
          type: 'category',
          data: dates
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: values,
          type: 'line',
          smooth: true
        }]
      };

      var option3 = {
        title: {
          text: '近7日文章获赞数变化折线图',
          x: 'center'
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b} <br/> 数值：{c}'
        },
        xAxis: {
          type: 'category',
          data: dates3
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: values3,
          type: 'line',
          smooth: true
        }]
      };

      var option4 = {
        title: {
          text: '近7日文章收藏数变化折线图',
          x: 'center'
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b} <br/> 数值：{c}'
        },
        xAxis: {
          type: 'category',
          data: dates4
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: values4,
          type: 'line',
          smooth: true
        }]
      };

      const option2 = {
        title : {
          text: '粉丝男女性别比例',
          x: 'center'
        },
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['男', '女']
        },
        series : [
          {
            name: '性别比例',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
              {value:this.manNum, name:'男'},
              {value:this.womanNum, name:'女'}
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      chart.setOption(option)
      chart2.setOption(option2)
      chart3.setOption(option3)
      chart4.setOption(option4)
    }
  }
}
</script>

<style scoped lang="scss">
.chart{
  width: 300px;
  height: 300px;
}
.container{
  display: flex !important;
  justify-content: center !important;
}
</style>